<template>
    <div >
        <div style="margin-bottom: 10px">
            <el-divider ></el-divider>
            <div style="float: left;top:-10px">
            <i  style="font-size: x-large" class="el-icon-document-checked"></i><span style="font-weight:bold;font-size: x-large">检验申请</span>
            </div>
            <br>
            <el-divider ></el-divider>
            <div >
            <el-input v-model="inputCaseNumber" style="width: 257px;float: left;" placeholder="请输入患者病历号" ></el-input>
            <el-input v-model="inputRealName" style="width: 257px; margin-left: 20px;float: left;" placeholder="请输入患者姓名" ></el-input>
            <el-button style="margin-left: 25px;float: left" type="primary" @click="select"> 搜索</el-button>
                <br>  <br>
            </div>
            <br>
        </div>
            <el-divider ></el-divider>
        <br>
        <el-table :data="tableData" stripe>
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="realName" label="患者姓名"></el-table-column>
            <el-table-column prop="caseNumber" label="患者病历号"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button type="primary" :plain="true"  @click="selectById(scope.$index,scope.row)">进行检验</el-button>
                    <el-button
                            type="primary" :plain="true"
                            @click.native.prevent="deleteRow(scope.$index, tableData)">移除</el-button>
                    <el-button  type="primary" :plain="true"  @click="open2(scope.$index, scope.row)">叫号</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
        </div>
        <br>  <br>
        <div class="block">
            <el-pagination
                    style="text-align:center"

                    :current-page="searchForm.page"
                    :page-sizes="[5, 10, 15, 20,25,30,35,40]"
                    :page-size="searchForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
            <!--分页组件结束-->
        </div>
    </div>
</template>
<script>
    import axios from "axios";

    export default {
        created() {
        },
        data() {
            return {
                inputCaseNumber: '',
                inputRealName: '',
                searchForm: { //查询四个属性初始化
                    page: 1,
                    limit: 5
                },
                tableData:[],
                //下拉列表中部门数据
                totalCount: 50,//要分页的数组总条数
                //当前checkbox选中的数据
                currentCheckedRows: [],
                //弹出层相关的
                title: undefined,//弹出层标题
                open: false,//是否显示弹出层
                //弹出层的表单的数据绑定
            }
        },
        methods: {
            deleteRow(index, rows) {
                rows.splice(index, 1);
                this.$message({
                    message: '移除成功',
                    type: 'success'
                });
            },
            async select() {
                //根据name换id
                //参数：String deptName
                await axios.post("http://127.0.0.1:8088/inspection/select", {caseNumber: this.inputCaseNumber,realName:this.inputRealName}).then((res) => {

                    this.tableData=res.data.data
                    console.log(this.tableData)
                    this.$message({
                        message: '查询成功',
                        type: 'success'
                    }); this.dialogFormVisible = false;
                    //this.init();
                }).catch(error=>{
                    console.log(error)
                });
                },
            async selectById(index,row) {
                //根据name换id
                //参数：String deptName
                await axios.post("http://127.0.0.1:8088/inspection/lectById", {params: { id:row.id}}).then((res) => {

                    this.tableData=res.data.data
                    console.log(this.tableData)
                    this.$message({
                        message: '申请成功',
                        type: 'success'
                    });

                    //跳转到病历首页,并进行参数传递
                    this.$router.push({
                        name: '患者录入',
                        params: {
                            registerId: row.id,
                        }
                    });
                }).catch(error => {
                    this.$message.error('申请失败');
                })
            },
            open2() {
                this.$message({
                    message: '叫号成功',
                    type: 'success'
                });
            },
            //每页条数发生变化时触发的事件
            },
        async mounted() {
            //获取病历号
            await axios.get("http://127.0.0.1:8088/inspection/query").then((res) => {
                this.tableData= res.data.data
                console.log(this.tableData)
            });
        }
    }
</script>
<style scoped>
</style>